<template>
  <div class="view_main">
    <m-header modile-title="查看凭证" go-back="true"></m-header>
    <div class="image_box">
      <ul>
        <li v-show="img.length!==0">
          <des-image :list="img"></des-image>
        </li>
        <li v-show="img.length==0 && flag">
          <div class="none_img">
            <p>暂无凭证图片</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
  .view_main {
    width: 100%;
    .image_box {
      ul {
        li {
          padding: 10px;
          .none_img {
            width: 100%;
            flex: 1;
            display: inline-flex;
            padding-top: 0;
            justify-content: center;
            align-items: center;
            background: url("../../../assets/default.png") no-repeat;
            background-size: 100px 100px;
            background-position: center;
            padding-bottom: 20px;
            p {
              font-size: 1.3rem;
              color: #0b7ad9;
              margin-top: 190px;
            }
          }
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../components/header'
  import desImage from '../../../components/desImge'
  import commonUrl from '../../../api/js/commonUrl'

  export default {
    name: 'ViewVoucher',
    data() {
      return {
        img: [],
        flag: false
      }
    },
    created() {
      this.getImage()
    },
    methods: {
      getImage() {
        const url = `${commonUrl.apiurl}index.php/home/Govern/getImg?id=${this.$route.params.id}`;
        this.$http.get(url).then(res => {
          if (res.data.code === 200) {
            this.img = res.data.data;
            this.flag = true
          }
        })
      }
    },
    components: {
      mHeader,
      desImage
    }
  }
</script>
